<template>
	<view class="poster-content">
		<yk-header :title="title" @headBtn="headBtn()" @closePage="closePage()"></yk-header>
		<view class="name">{{infoKind.title}}</view>
		<view class="time">{{infoKind.createTime}}</view>
		<view class="video">
			<video id="myVideo" :poster="infoKind.urlPic"  :src="infoKind.url"></video>
		</view>
		
		<view v-if="version == 1"></view>
		<view class="btn-box" v-else>
			<view @click="share">分享</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '视频详情',
				video:'',
				name:'',
				id: "",
				urlPic:'',
				infoKind:{},
				version: 0,
			}
		},
		onLoad(event) {
			this.id = event.id;
			this.version = window.version;
			this.videoInfo();
		},
		onShow() {
			window.genVersion();
			this.video = this.video;
		},
		 
		methods: {
			//顶部功能键
			headBtn(e) {
				let that = this;
				uni.showActionSheet({
					itemList: ['刷新', '清除缓存'],
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if (res.tapIndex == 0) {
							//刷新
							uni.showLoading({
								title: '刷新中'
							});
							setTimeout(function() {
								uni.hideLoading();
							}, 1500);

						} else {
							//清楚缓存
							// callNative('onClearH5Cache')
							uni.showToast({
								title: '清楚缓存成功'
							});
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//关闭当前页面
			closePage() {
				callNative('navigateBack')
			},
			share() {
				console.log("share img video===" + this.video+'==anme=='+this.name);
				onShare(this.video, this.name,this.urlPic, this.name);
			},

			// 接口
			videoInfo() {
				try {
					uni.request({
						url: this.$usereq +"/coupon-admin/zy/video/info/" + this.id,
						method: "GET",
						header: {
							"blade-auth": decodeURI(uni.getStorageSync("token")),
							"content-type": "application/json"
						},
						data: {
							id: this.id
						},
						success: res => {
							let datas = res.data;
							console.log(datas);
							if (datas.code == 200) {
								this.infoKind = datas.data;
								this.video=datas.data.url;
								this.name=datas.data.title;
								this.urlPic=datas.data.urlPic;
								console.log(this.infoKind);
							} else {
								uni.showToast({
									title: datas.msg,
									icon: "none",
									duration: 2000
								});
							}
							uni.stopPullDownRefresh();
						}
					});
				} catch (e) {
					console.log(e.message);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.poster-content {
		width: 100%;
		min-width: 750px;
		font-size: 36px;

		image {
			width: 100%;
			display: block;
		}

		.btn-box {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100px;
			overflow: auto;
			text-align: center;

			view {
				float: left;
				line-height: 100px;
				width: 100%;
				color: #fff;
			}

			view:nth-child(1) {
				font-size: 36px;
				background: #0096FF;
			}

		}
	}

	.title-box {
		padding-left: 134px;
	}

	.image-box {
		width: 174px !important;
		height: 64px !important;
		position: relative;
		top: -12px;
		display: flex;
		flex-wrap: wrap;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.image-box-btn {
		width: 100%;
		height: 100%;
		position: absolute;
		top: -12px;
		right: 0;
		z-index: 100;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;

		.box-btn {
			width: 50%;
			height: 64px;
			display: flex;
			flex-wrap: wrap;
		}

		view {
			width: 50%;
			height: 64px;
			display: flex;
			flex-wrap: wrap;
		}
	}
	.name{
		font-size: 32px;
		margin-top: 22px;
		margin-left:32px;
		margin-right: 50px;
		// font-weight: Bold;
		color: #333333;
		line-height: 48px;
		font-family:PingFang SC;
		
	}
	.time{
		padding-top: 22px;
		margin-left: 32px;
		font-size: 24px;
		color: #999999;
	}
	.video{
		margin-top: 74px;
		height:422px;
		width: 750px;
		text-align: center;
		margin-bottom: 100px;
		video{
			width: 750px;
			height: 422px;
			
		}
		
	}
	div.uni-video-cover-play-button{
		display: none !important;
		z-index: 1000;
		width: 0px;
		height: 0px;
	}
</style>